<template>
  <div class="top-bar">
    <div class="left">
      <Dropdown :options="systemOptions">
        <div class="item">
          <icon-park name="all-application" color="#000" size="0.2rem" :stroke-width="3" />
        </div>
      </Dropdown>
      <Dropdown v-for="item in applicationMenuInfo" :key="item[0]" :options="item[1]">
        <div class="item item-text">
          {{ item[0] }}
        </div>
      </Dropdown>
    </div>
    <div class="right">
      <div class="item item-text">
        {{ moment(currentDate).format("M月D日 dddd HH:mm:ss") }}
      </div>
      <div class="item" @click="fullscreen">
        <icon-park name="full-screen-one" size="0.2rem" color="#000" :stroke-width="3" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import IconPark from "../../common/IconPark.vue"
import Dropdown from "@/components/common/Dropdown.vue"
import moment from "moment"
import { useCurrentDate } from "@/tools/setup-tool"
import { useApplicationStore } from "@/stores/application"
import { computed } from "vue"
import { storeToRefs } from "pinia"
import { type DropdownMixedOption } from "naive-ui/es/dropdown/src/interface"

const applicationStore = useApplicationStore()

const { applicationsContext } = storeToRefs(applicationStore)

const applicationMenuInfo = computed(() => {
  const activeApplication = applicationsContext.value.activeProcessor.getActiveApplication()
  if (activeApplication && activeApplication.isOpened()) {
    return [...activeApplication.info.topBarMenu.entries()]
  } else {
    return []
  }
})

const systemOptions: DropdownMixedOption[] = [
  {
    label: "关于本项目",
    key: "about"
  },
  {
    type: "divider"
  },
  {
    label: "锁屏",
    key: "lock"
  },
  {
    label: "登录",
    key: "login"
  }
]

const { currentDate } = useCurrentDate()

function fullscreen() {
  const elem = document.documentElement
  if (elem.requestFullscreen) {
    elem.requestFullscreen()
  }
}
</script>

<style scoped lang="scss">
.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-bar-size);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 1px 0 rgba(100, 100, 100, 0.37);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: black;

  .left,
  .right {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .left {
    padding-left: 0.1rem;
  }

  .right {
    .item {
      padding: 0 0.05rem;
    }
  }

  .item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.1rem;
    border-radius: 0.05rem;
    cursor: default;
    user-select: none;

    .app-icon {
      --app-icon-size: calc(var(--top-bar-size) * 0.5);
    }
  }

  .item-text {
    font-size: calc(var(--top-bar-size) * 0.55);
  }

  .item:hover {
    background-color: rgba(100, 100, 100, 0.2);
  }
}
</style>
